﻿
<div id="container" style="width: 100%; height: 600px;"></div>
<script type="text/javascript" src="/Scripts/highcharts-all.js"></script>
<script>
    var options = {
        chart: {
            type: 'column',
            zoomType:'xy',
            renderTo: 'container',
        },
        title: {
            text: 'Disk Space'
        },
        xAxis: {
            categories: [@{for(int j=0;j<100;j++){if(@ViewBag.Disks[j][0]!=null){<text>'</text>@ViewBag.Disks[j][0]<text>'</text>@ViewBag.Coma}}}]
            },
        yAxis: {
            min: 0,
            title: {
                text: 'Disks Info'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: false,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: true
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y+' Gb' +'<br/>'+
                    'Total: '+ this.point.stackTotal +' Gb';
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'Free Space',
            data: [@{for(int j=0;j<100;j++){if(@ViewBag.Disks[j][1]!=null){@ViewBag.Disks[j][1]@ViewBag.Coma}}}],
    }, {
        name: 'Used Space',
        data: [@{for(int j=0;j<100;j++){if(@ViewBag.Disks[j][2]!=null){@ViewBag.Disks[j][2]@ViewBag.Coma}}}]
    }, ]
    };

   

    $(document).ready(function() {
        chart = new Highcharts.Chart(options);
    });
</script>




